<template>
	<div class="topic">
		<div class="cont" v-for="(item ,index) in list.slice((curr - 1)*pageSize, curr*pageSize)" :key="item.id">
			<div class="topic-left">
				<img :src="item.imgUrl">
			</div>
			<div class="topic-right">
				<div class="title">
					<h3>{{ item.title }}</h3>
					<p>{{ item.content }}</p>
				</div>
				<div class="pinglun">
					<div class="comments">
						<i class="el-icon-chat-dot-square"></i><span>{{ item.comments }}</span>
						<i class="el-icon-view"></i><span>{{ item.seeNum }}</span>
					</div>
					<div class="time">
						<el-avatar :src="item.userImg"></el-avatar>
						<span>{{ item.time }}</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { getTopic } from '@/util/request.js'
	import bus from '@/bus.js'

	export default {
		data() {
			return {
				list: [
					{
						"id": 13,
						"imgUrl": "https://www.qjmotor.com/uploadfile/202012/097a77ab9073cf4.jpg",
						"title": "与对的人在一起，每天都是七夕节",
						"content": "",
						"comments": 9739,
						"seeNum": 9999,
						"userImg": "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
						"time": "2021.9.26"
					},
				],
				all: 0, //总数据量
				curr: 0, //当前页码
				pageSize: 0, //每页的数据个数
			}
		},
		created() {
			this.gettopicData()
			this.settotals()
		},
		mounted() {
			//接收paging兄弟组件传的值
			bus.$on('pagedata', (val) => {
				console.log(val)
				this.curr = val.curr
				this.pageSize = val.pageSize
			})
		},
		emits: ['settotal'],
		methods: {
			//请求数据
			gettopicData() {
				getTopic({

				}).then(res => {
					this.list = res.data.data.list
					this.$emit('settotal', this.list.length)
					this.all = res.data.data.list.length
				})
			},
			settotals() {
				this.$emit('settotal', this.list.length)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.topic {
		.cont {
			width: 100%;
			height: 240px;
			display: flex;
			justify-content: space-between;
			padding: 10px;
			box-sizing: border-box;
			margin-bottom: 20px;
			border-radius: 8px;

			&:hover {
				box-shadow: 0 0 8px 8px #ddd;
				transition: all .2s;
				cursor: pointer;
			}

			.topic-left {
				width: 28%;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.topic-right {
				width: 68%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.pinglun {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.comments {}

					.time {
						display: flex;
						align-items: center;
						column-gap: 10px;
					}
				}
			}
		}
	}
</style>
